<template>
  <view class="wrap">
    <view class="Dame">
      <u--form
        labelPosition="left"
        :model="model1"
        ref="uForm"
      >
        <u-form-item
          label="姓名2"
          prop="userInfo.name"
          borderBottom
          ref="item1"
        >
          <u--input
            v-model="model1.userInfo.name"
            border="none"
          ></u--input>
        </u-form-item>
      </u--form>
    </view>
    <view class="Dame">
      <view class="ation">
        <view class="f32" style="width: 100rpx"> 邮箱: </view>
        <input
          v-model="email"
          type="text"
          placeholder="请输入用户邮箱"
          style="width: calc(100% - 120rpx); margin-left: 0"
        />
      </view>
      <view class="ation">
        <view class="f32" style="width: 100rpx"> 户籍: </view>
        <input
          v-model="domicile"
          type="text"
          placeholder="请输入用户户籍"
          style="width: calc(100% - 120rpx); margin-left: 0"
        />
      </view>
      <view class="ation">
        <view class="f32" style="width: 100rpx"> 性别: </view>
        <radio-group
          @change="onGenderChange"
          style="font-size: 32rpx; margin-left: 0"
          v-model="gender"
        >
          <label>
            <radio :value="0" :checked="gender === 1" /> 男
          </label>
          <label style="margin-left: 12rpx">
            <radio :value="1" :checked="gender === 0" /> 女
          </label>
        </radio-group>
      </view>
      <view class="ation" style="padding-bottom: 10rpx">
        <view class="Inform"> 出生日期: </view>
        <view style="height: 100%; font-size: 32rpx">
          <picker
            start="1980-01-01"
            mode="date"
            :value="date"
            @change="bindDateChange"
          >
            <view class="uni-input">{{ date }}</view>
          </picker>
        </view>
      </view>
    </view>
    <view class="card">
      <view class="">
        <text
          style="
            font-weight: 400;
            font-size: 28rpx;
            color: #4e5969;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
          >请拍摄/上传本人真实有效的身份证照片
        </text>
      </view>
      <view class="">
        <text
          style="
            font-weight: 400;
            font-size: 32rpx;
            color: #1d2129;
            line-height: 48rpx;
          "
          >身份证人像面</text
        >
      </view>
      <view class="front">
        <image
          v-if="frontal"
          :src="frontal"
          mode="aspectFit"
          style="width: 320rpx; height: 204rpx"
          @click="obverse"
        ></image>
        <image
          :src="card_zm"
          mode="aspectFit"
          style="width: 320rpx; height: 204rpx"
          v-if="!frontal"
          @click="obverse"
        ></image>
        <image
          :src="paishe"
          v-if="!frontal"
          mode="aspectFill"
          style="
            width: 132rpx;
            height: 132rpx;
            position: absolute;
            left: 86rpx;
            top: 28rpx;
          "
          @click="obverse"
        ></image>
      </view>
      <view class="">
        <text
          style="
            font-weight: 400;
            font-size: 32rpx;
            color: #1d2129;
            line-height: 48rpx;
          "
          >身份证国徽面</text
        >
      </view>
      <view class="front">
        <image
          v-if="reverse"
          :src="reverse"
          mode="aspectFit"
          style="width: 320rpx; height: 204rpx"
          @click="opposite"
        ></image>
        <image
          :src="card_bm"
          mode="aspectFit"
          style="width: 320rpx; height: 204rpx"
          v-if="!reverse"
          @click="opposite"
        >
        </image>
        <image
          :src="paishe"
          mode="aspectFill"
          style="
            width: 132rpx;
            height: 132rpx;
            position: absolute;
            left: 86rpx;
            top: 28rpx;
          "
          v-if="!reverse"
          @click="opposite"
        ></image>
      </view>
    </view>
    <button
      @click="quereng"
      style="background: #609da0; border-radius: 96rpx; color: #fff"
    >
      确认
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      range: [
        {
          value: 0,
          text: "女",
        },
        {
          value: 1,
          text: "男",
        },
      ],
      open: "",
      email: "", //邮箱
      birthday: "", //生日
      domicile: "", //户籍
      gender: "", //性别
      date: "请选择出生日期",
      frontal: "",
      reverse: "",
      card_zm: "",
      card_bm: "",
      paishe: "",
      model1: {
        userInfo: {
          name: "",
          sex: "",
        },
      },
      rules: {
        "userInfo.name": {
          type: "number",
          required: true,
          message: "请填写姓名",
          trigger: ["blur", "change"],
        },
        "userInfo.sex": {
          type: "string",
          max: 1,
          required: true,
          message: "请选择男或女",
          trigger: ["blur", "change"],
        },
      },
    };
  },
  onLoad() {
    this.getData();
    let self = this;
    self.card_zm = self.websiteUrl + "/image/sfz/card_zm.png";
    self.card_bm = self.websiteUrl + "/image/sfz/card_bm.png";
    self.paishe = self.websiteUrl + "/image/sfz/paishe.png";
  },
  onReady() {
		// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
		this.$refs.uForm.setRules(this.rules)
	},
  methods: {
    onGenderChange(e) {
      console.log(e, 1111);
      this.gender = e.detail.value;
    },
    /*获取数据*/
    getData() {
      let self = this;
      self._get("user.index/detail", {}, function (res) {
        self.reverse = res.data.userInfo.sfzback;
        self.frontal = res.data.userInfo.sfzpositive;
        self.email = res.data.userInfo.email;
        self.domicile = res.data.userInfo.domicile;
        self.birthday = res.data.userInfo.birthday;
        self.open = res.data.userInfo.gender;
        self.gender = res.data.userInfo.gender;
        console.log(self.gender, "255");
        self.date = self.timestampToTime(res.data.userInfo.birthday);
      });
    },
    bindDateChange(e) {
      this.date = e.detail.value;
      this.birthday = new Date(e.detail.value) / 1000;
      console.log(this.birthday);
    },
    timestampToTime(timestamp) {
      console.log(timestamp, "++++++++++++++");
      timestamp = timestamp ? timestamp * 1000 : null;
      let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
        " ";
      let h =
        (date.getHours() < 10
          ? "0" + date.getHours()
          : date.getHours()) + ":";
      let m =
        (date.getMinutes() < 10
          ? "0" + date.getMinutes()
          : date.getMinutes()) + ":";
      let s =
        date.getSeconds() < 10
          ? "0" + date.getSeconds()
          : date.getSeconds();
      return Y + M + D;
    },
    quereng() {
		console.log("quereng")
      this.$refs.uForm
        .validate()
        .then((res) => {
          uni.$u.toast("校验通过1",res);
        })
        .catch((errors) => {
          uni.$u.toast("校验失败");
        });
		return

      this._post(
        "user.user/realNameAuthentication",
        {
          email: this.email,
          birthday: this.birthday,
          domicile: this.domicile,
          gender: this.gender,
        },
        (res) => {
          if (res.code) {
            uni.showToast({
              title: res.msg,
            });
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          }
        }
      );
    },
    change(e) {
      console.log(e);
      this.gender = e;
    },
    obverse() {
      let params = {
        token: uni.getStorageSync("token"),
        app_id: "10001",
        type: 1,
      };
      uni.chooseImage({
        success: (chooseImageRes) => {
          console.log(chooseImageRes, "chooseImageRes");
          const tempFilePaths = chooseImageRes.tempFilePaths;
          this.frontal = tempFilePaths[0];
          uni.uploadFile({
            url: "https://hlz.yicha.xin/index.php/api/gongzheng.index/UploadFile", // 惠来
            // url: 'https://guangbang.rchz.top/index.php/api/gongzheng.index/UploadFile', // 广邦
            filePath: tempFilePaths[0],
            name: "iFile",
            formData: params,
            success: (uploadFileRes) => {},
          });
        },
      });
    },
    opposite() {
      let params = {
        token: uni.getStorageSync("token"),
        app_id: "10001",
        type: 2,
      };
      uni.chooseImage({
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          this.reverse = tempFilePaths[0];
          uni.uploadFile({
            url: "https://hlz.yicha.xin/index.php/api/gongzheng.index/UploadFile",
            // url: 'https://guangbang.rchz.top/index.php/api/gongzheng.index/UploadFile',
            filePath: tempFilePaths[0],
            name: "iFile",
            formData: params,
            success: (uploadFileRes) => {},
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.u-popup {
  z-index: 10075 !important;
}
.wrap {
  padding: 20rpx;
}

.card {
  padding: 0 20rpx;
  padding-left: 40rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 16rpx;

  .front {
    width: 100%;
    border: 1rpx solid #f5f5f5;
    margin: 20rpx 0;
    position: relative;
    image {
      width: 600rpx;
      height: 260rpx;
    }
  }
}

::v-deep .uni-select {
  border: none !important;
}

::v-deep .uni-select__input-placeholder {
  font-size: 32rpx;
}

.Dame {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;

  button {
    width: 220rpx;
    background-color: cadetblue;
    color: #fff;
    margin: 0 auto;
  }
}

.ation {
  display: flex;
  padding: 20rpx;
  align-items: center;

  input {
    margin-left: 20rpx;
  }

  .Inform {
    font-size: 32rpx;
    width: 142rpx;
  }
}
</style>
